<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../../cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="../../../cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="cr_policy_network_behavior_mojo.html">
<link rel="import" href="network_property_list_mojo.html">
<link rel="import" href="network_shared_css.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="network-ip-config">
  <template>
    <style include="network-shared iron-flex">
      cr-toggle {
        margin-inline-start: var(--settings-control-label-spacing);
      }
    </style>
    <div class="property-box">
      <div id="autoIPConfigLabel" class="start">
        [[i18n('networkIPConfigAuto')]]
      </div>
      <cr-policy-indicator indicator-type="[[getPolicyIndicatorType(
          managedProperties.ipAddressConfigType)]]">
      </cr-policy-indicator>
      <cr-toggle id="autoConfigIpToggle" checked="{{automatic_}}"
          disabled="[[!canChangeIPConfigType_(managedProperties)]]"
          on-change="onAutomaticChange_"
          aria-labelledby="autoIPConfigLabel">
      </cr-toggle>
    </div>
    <template is="dom-if" if="[[hasIpConfigFields_(ipConfig_)]]">
      <div class="property-box single-column indented stretch">
        <network-property-list-mojo fields="[[ipConfigFields_]]"
            all-fields-read-only="[[automatic_]]"
            property-dict="[[ipConfig_]]"
            edit-field-types="[[getIPEditFields_(automatic_,
                managedProperties)]]"
            on-property-change="onIPChange_">
        </network-property-list-mojo>
      </div>
    </template>
  </template>
  <script src="network_ip_config.js"></script>
</dom-module>
